import './ScheduleCharts.scss'
import dayjs from 'dayjs'
import { useRef } from 'react'
import { DatePicker } from 'antd'
import { useRequest, useSize } from 'ahooks'
import { useEffect, useState } from 'react'

import { FrontModalBox } from '../Modal'
import { Http } from '../../../../Common/Api'
import { TitleSmall001 } from '../Common/SmallTitle'
import { ColumnStyle, ColumnConfigA01Template } from './AssetsCharts'
import { insertCharacter } from '../../../../Common/Configure/Common'

const TopNav = [
    { uuid: 1, label: '总体' },
    { uuid: 2, label: '年度' },
    { uuid: 3, label: '月份' },
]

const TextMapping = ['', '年', '月', '周']
const PickerMapping = ['', 'YYYY', 'YYYY-MM', 'YYYY-MM-DD ']

export const ScheduleChartsA01 = () => {
    const ChartsBox1 = useRef()
    const ChartsBox2 = useRef()
    const ChartsBox3 = useRef()
    const ChartsSize1 = useSize(ChartsBox1)
    const ChartsSize2 = useSize(ChartsBox2)
    const ChartsSize3 = useSize(ChartsBox3)

    const [Active, setActive] = useState(1)
    const [Date, setDate] = useState(dayjs())

    const [ChartA01, setChartA01] = useState([])
    const [ChartA02, setChartA02] = useState([])
    const [ChartA03, setChartA03] = useState([])

    const { runAsync: getA01 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            let data = res.list.flatMap(
                ({ uuid, 名称, 本完成比, 往完成比, 本金额, 往金额, 总金额, 总完成比, 完成金额 }) => [
                    {
                        uuid,
                        name: '本' + TextMapping[Active],
                        type: 名称,
                        value: 本完成比,
                        small: 本金额,
                        label: 总金额,
                        总完成比,
                        完成金额,
                    },
                    {
                        uuid,
                        name: '往' + TextMapping[Active],
                        type: 名称,
                        value: 往完成比,
                        small: 往金额,
                        label: 总金额,
                        总完成比,
                        完成金额,
                    },
                ],
            )
            setChartA01(data)
        },
    })

    const { runAsync: getA02 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = res.list.flatMap(({ 名称, 本完成比, 往完成比, 本金额, 往金额, 总金额, 总完成比, 完成金额 }) => [
                {
                    name: '本' + TextMapping[Active],
                    type: 名称,
                    value: 本完成比,
                    small: 本金额,
                    label: 总金额,
                    总完成比,
                    完成金额,
                },
                {
                    name: '往' + TextMapping[Active],
                    type: 名称,
                    value: 往完成比,
                    small: 往金额,
                    label: 总金额,
                    总完成比,
                    完成金额,
                },
            ])
            setChartA02(data)
        },
    })

    const { runAsync: getA03 } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = res.list.flatMap(({ 名称, 本完成比, 往完成比, 本金额, 往金额, 总金额, 总完成比, 完成金额 }) => [
                {
                    name: '本' + TextMapping[Active],
                    type: insertCharacter(名称, '\n', 6),
                    value: 本完成比,
                    small: 本金额,
                    label: 总金额,
                    总完成比,
                    完成金额,
                },
                {
                    name: '往' + TextMapping[Active],
                    type: insertCharacter(名称, '\n', 6),
                    value: 往完成比,
                    small: 往金额,
                    label: 总金额,
                    总完成比,
                    完成金额,
                },
            ])
            setChartA03(data)
        },
    })

    useEffect(() => {
        const DateTypeMapping = ['', 4, 7, 10]
        const dateType = DateTypeMapping[Active]
        let StatDate = dayjs(Date).format(PickerMapping[Active])
        if (Active === 1) StatDate += '-01-01'
        if (Active === 2) StatDate += '-01'
        getA01({ url: 'getYPGetAllInvestPer', data: { dateType, StatDate } })
        getA02({ url: 'getYPGetOrgInvestPer', data: { dateType, StatDate } })
        getA03({ url: 'getYPGetWinningBidderInvestPer', data: { dateType, StatDate } })
    }, [Active, Date, getA01, getA02, getA03])

    const [OptionsCall, setOptionsCall] = useState()

    const TipTemp = ({ title, items }) => {
        const [A01, A02] = items
        return (
            <div className="TipTemp">
                <div className="title">{title}</div>
                <div className="label">
                    <div>{A01.data.name}完成比 : </div>
                    <div>{A01.data.value}%</div>
                </div>
                <div className="label">
                    <div>{A02.data.name}完成比 : </div>
                    <div>{A02.data.value}%</div>
                </div>
                <div className="label">
                    <div>总完成比 : </div>
                    <div>{A01.data.总完成比}%</div>
                </div>
                <div className="label">
                    <div>{A01.data.name}完成金额 : </div>
                    <div>{A01.data.small}万元</div>
                </div>
                <div className="label">
                    <div>{A02.data.name}完成金额 : </div>
                    <div>{A02.data.small}万元</div>
                </div>
                <div className="label">
                    <div>完成金额 : </div>
                    <div>{A01.data.完成金额}万元</div>
                </div>
                <div className="label">
                    <div>总金额 : </div>
                    <div>{A01.data.label}万元</div>
                </div>
                <div className="label">
                    <div>剩余金额 : </div>
                    <div>{A01.data.label - A01.data.small - A02.data.small}万元</div>
                </div>
            </div>
        )
    }

    return (
        <div className="ScheduleChartsA01">
            <div className="nav">
                <div>
                    {TopNav.map(({ uuid, label }) => (
                        <div key={uuid} className={Active === uuid ? 'active' : ''} onClick={() => setActive(uuid)}>
                            {label}
                        </div>
                    ))}
                </div>
                <DatePicker
                    allowClear={false}
                    suffixIcon={false}
                    format={PickerMapping[Active]}
                    value={Date}
                    onChange={setDate}
                />
            </div>
            <div className="top">
                <TitleSmall001 title="按类别" />
                <div className="ChartsBox" ref={ChartsBox1}>
                    {ChartsSize1 && (
                        <ColumnConfigA01Template
                            size={ChartsSize1}
                            data={ChartA01}
                            style={{
                                ...ColumnStyle,
                                isStack: true,
                                isGroup: false,
                                tipDefinition: { temp: TipTemp },
                                YTitle: '%',
                                ColumnWidth: 40,
                            }}
                            click={e => {
                                setOptionsCall({
                                    type: 'TableList',
                                    data: {
                                        type: 'YPInvestmentDetails',
                                        title: '投资统计详情',
                                        uuid: e.uuid,
                                    },
                                })
                            }}
                        />
                    )}
                </div>
            </div>
            <div className="btm">
                <div className="left">
                    <TitleSmall001 title="按标段" />
                    <div className="ChartsBox" ref={ChartsBox2}>
                        {ChartsSize2 && (
                            <ColumnConfigA01Template
                                size={ChartsSize2}
                                data={ChartA02}
                                style={{
                                    ...ColumnStyle,
                                    isStack: true,
                                    isGroup: false,
                                    tipDefinition: { temp: TipTemp },
                                    YTitle: '%',
                                    ColumnWidth: 40,
                                }}
                                click={e => {
                                    setOptionsCall({
                                        type: 'TableList',
                                        data: {
                                            type: 'YPInvestmentDetails',
                                            title: '投资统计详情',
                                            OrganizationUuid: e.type,
                                        },
                                    })
                                }}
                            />
                        )}
                    </div>
                </div>
                <div className="right">
                    <TitleSmall001 title="按施工单位" />
                    <div className="ChartsBox" ref={ChartsBox3}>
                        {ChartsSize3 && (
                            <ColumnConfigA01Template
                                size={ChartsSize3}
                                data={ChartA03}
                                style={{
                                    ...ColumnStyle,
                                    isStack: true,
                                    isGroup: false,
                                    tipDefinition: { temp: TipTemp },
                                    YTitle: '%',
                                    ColumnWidth: 40,
                                }}
                                click={e => {
                                    setOptionsCall({
                                        type: 'TableList',
                                        data: {
                                            type: 'YPInvestmentDetails',
                                            title: '投资统计详情',
                                            list: e.type,
                                        },
                                    })
                                }}
                            />
                        )}
                    </div>
                </div>
            </div>
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
